<template>
  <el-drawer v-model="drawerVisible"  size="519">
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">近期地震</h4>
    </template>
   
    <div style="display: flex;margin-bottom: 16px;align-items: center;justify-content: space-between;">
      <div class="flex">
        <div v-for="(item, index) in ListTitlearr" :class="tabIndx == index ? 'tabStyleActive' : 'tabStyle'" :key="index"
          @click="tabClick(item,index)">{{ item }}
      </div>
      </div>
      <el-input v-model="queryParam.referenceLocation" placeholder="请输入内容" :suffix-icon="Search"
        style="width: 240px;"
        @keydown.enter.native="selectByName(queryParam.referenceLocation)"
         />
    </div>
    <el-divider />
    
    <!-- 子任务列表 -->
              <div class="top1"
                 style="display: flex; align-items: center; font-size: 16px; color: #b0b0b0; ">
                 <div class="top1">
                  <el-date-picker v-model="timeValue"  style="width: 256px;"
                  value-format="YYYY-MM-DD"
                  type="daterange" range-separator="~"
                    start-placeholder="开始日期" end-placeholder="结束日期"
                    @change="selectByTimeRange()" />
                 </div>
                  
                <div style="margin-left: 10px;">
                 <el-radio-group v-model="queryParam.area" @change="setSearchParams({...queryParam})">
                    <el-radio v-for="(item, index) in top1List" size="small"
                    :key="index"
                    :value="item.value" >{{ item.label }}</el-radio>
                  </el-radio-group> 
                </div>
                 <div style="margin-left: 10px;">
                  <el-divider direction="vertical" />
                  <el-button
                    link
                    type="primary"
                    @click="isMorefun(!isMore)"
                    size="small"
                  >
                    更多<el-icon v-if="!isMore"><CaretBottom /></el-icon><el-icon v-else><CaretTop /></el-icon>
                  </el-button>
                 </div>
              
            </div>
            <div class="top2" v-show="isMore"
                 style="display: flex; align-items: center; font-size: 14px; margin-top: 10px;">
              <div style="width: fit-content;">
                震级：
              </div>
              <div style="display: flex; align-items: center;  ">
                <el-input v-model="stat" style="width: 109px;" 
                 :formatter="(value) => value.replace(/[^0-9.]/g, '').replace(/^(\d+\.\d{0,1}).*$/, '$1')"
                :parser="(value) => value.replace(/[^0-9.]/g, '').replace(/^(\d+\.\d{0,1}).*$/, '$1')"
                        @change="selectBetween()" placeholder="请输入"/>
              <div style="width: 50px; text-align: center;">至</div>
              <el-input v-model="end" style="width: 109px;" 
               :formatter="(value) => value.replace(/[^0-9.]/g, '').replace(/^(\d+\.\d{0,1}).*$/, '$1')"
                :parser="(value) => value.replace(/[^0-9.]/g, '').replace(/^(\d+\.\d{0,1}).*$/, '$1')"
                        @change="selectBetween()" placeholder="请输入"/>
              </div>
                        <div style="margin-left: 10px;">
                          <el-button plain
                            type="primary"
                            @click="timeBut(!istimeButt)"
                            
                          >
                          <el-icon v-if="istimeButt"><CaretBottom /></el-icon><el-icon v-else><CaretTop /></el-icon>
                            {{ timeButtext }}
                          </el-button>
                        </div>
            </div>
    <Table
      :columns="[{field:'content'}]"
      :data="tableObject.tableList"
      :pagination="{
          total: tableObject.total,
          layout: 'total, prev, pager, next',
        }"
        v-model:pageSize="tableObject.pageSize"
        v-model:currentPage="tableObject.currentPage"
        ref="TableRef"
        @register="register"
        :border="false"
    >
      <template #content="row">
        <div class="flex cursor-pointer contentdiv" @click="handRowdata(row.row)" :class="rowDataId==row.row.id?'active':''" >
          <div class="eaclass">
            {{ row.row.earthquakeMagnitude}}
          </div>
          <div class="list_flex">
            <div class="liss_title">{{ row.row.title }}</div>
            <div class="liss_time">{{ row.row.earthquakeTime }}</div>
            <div class="cont_flex liss_time">
              <span>经度:{{ row.row.longitude }},纬度:{{ row.row.latitude }},深度:{{ row.row.depth }}Km</span>
            </div>
          </div>
        </div>
      </template>
    </Table>
    <!-- 减签 -->
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">取 消</el-button>
        <el-button type="primary" :disabled="formLoading" @click="confirmClick">确 定</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
import * as earthquakeServerApi from "@/api/earthquake/earthquakeServer";
import * as imgProduceApi from '@/api/productmange/imgProduce';
import { Search } from '@element-plus/icons-vue'
defineOptions({ name: 'TestDrawer' })

const queryParam = ref({
  area: 0, //区域  0--全部  1--国内  2--国外
  magnitudeType: 0, //震级类型  0--全部  1--3级以下  2--3-5级  3--5-7级  4--7级以上  5--输入的震级
  stat: null, //震级开始
  end: null, //震级结束
  timeType: 0, //时间类型  0--全部  1--最近24小时  2--最近一周  3--最近一个月  4--最近一年  5--自定义的时间
  statTime: '', //开始时间
  endTime: '', //结束时间
  earthquakeType: 1, //地震类型  1--正式地震  2--测试地震  3--演练地震  4--自动地震, 手动触发默认是2 测试地震
  referenceLocation: '', //可以根据 震级、发震时刻、经度、纬度、震源深度、参考位置进行 模糊查询，这里用参考位置字段传参
  sorted: 0, // 0--倒序  1--正序
  pageSize: '10',
  pageNo: '1'
})
// tableObject：表格的属性对象，可获得分页大小、条数等属性
// tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
// 详细可见：https://doc.iocoder.cn/vue3/crud-schema/
const { tableObject,register, tableMethods } = useTable(
  {
    getListApi: earthquakeServerApi.formalEarthquake, // 分页接口
    defaultParams:{...queryParam.value} //传递默认数据
  }
)
// 获得表格的各种操作
const { getList,setSearchParams } = tableMethods
const tabName = ref('正式')
const ListTitlearr = ref([
  '正式', '测试', '演练', '自动'
])
const ListTitle = ref({
  '正式':1, '测试':2, '演练':3, '自动':4
})
const tabIndx=ref(0)
const tabClick = (item,index)=>{
  tabIndx.value=index
  queryParam.value.earthquakeType=ListTitle.value[item];
  search({...queryParam.value});
  rowDataId.value='';
}
const tabChange = ()=>{
  queryParam.value.earthquakeType=ListTitle.value[tabName.value];
  search({...queryParam.value});
  rowDataId.value='';
}
const top1List = ref([{label:'全部',value:0}, {label:'国内',value:1}])
const stype = ref('全部')
const message = useMessage() // 消息弹窗
const drawerVisible = ref(false) // 抽屉的是否展示
const formLoading = ref(false) // 抽屉的是否展示
const timeValue = ref([])
const isMore = ref(false) // 更多显示
const istimeButt = ref(true) // 正序到序
const timeButtext = ref('时间正序')
const timeBut = (t)=>{
  istimeButt.value=t;
  if(t){
    timeButtext.value='时间正序'
  }else{
    timeButtext.value='时间倒序'
  }
  queryParam.value.sorted= istimeButt.value==true?1:0;
  search({...queryParam.value});
}
const search= async (data)=>{
  await setSearchParams(data);
  rowDataId.value='';

}
const isMorefun = (t)=>{
  isMore.value=t;
  istimeButt.value=true;
  queryParam.value.sorted= 0;
  queryParam.value.magnitudeType = 0;
  queryParam.value.stat = null;
  queryParam.value.end = null;
  // setSearchParams({...queryParam.value});
}
const baseTask = ref<object>({})
const ids = ref<any>([])
const rowDataId=ref('');

const handRowdata = async (row) => {
  console.log(row)
  baseTask.value = row;
  rowDataId.value=row.id;
}

/** 打开弹窗 */
const open = async (task: any) => {
  console.log('task',task);
  
  rowDataId.value='';
  ids.value = task
  // 展开抽屉
  drawerVisible.value = true
  getList()
}
defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
//取消
const cancelClick = async () => {
  // 关闭抽屉
  drawerVisible.value = false
}
//确定
const confirmClick = async () => {
 // 提交请求
 formLoading.value = true
  try {
    if(!rowDataId.value){
      formLoading.value = false
      message.info('请选择数据')
      return false
    }
    const data ={ ...baseTask.value,ids:ids.value.join(',')};
    await imgProduceApi.pictureRuleTest(data)
    message.success('添加测试数据成功')
    cancelClick();
  } finally {
    formLoading.value = false
  }
  
}

//自定义时间区间
const selectByTimeRange = async () => {
  queryParam.value.timeType = 5;
  queryParam.value.statTime = timeValue.value[0];
  queryParam.value.endTime = timeValue.value[1];
  await search({...queryParam.value});
}
const stat=ref(null)
const end=ref(null)

//自定义震级区间
const selectBetween = async () => {
  if (stat.value !== null && stat.value !== '' && end.value !== null && end.value !== '') {
    queryParam.value.magnitudeType = 5;
    queryParam.value.stat = stat.value;
    queryParam.value.end = end.value;
    await search({...queryParam.value});
  }
}
//模糊查询
const selectByName = async (name) => {
  queryParam.value.referenceLocation = name;
  await search({...queryParam.value});
}
</script>
<style  scoped>
:deep(.el-drawer__body){
    padding: 0 24px !important;
  }
  ::deep(.el-drawer__header){
    padding-bottom: 20px;border-bottom: 1px solid #F0F0F0;
  }
  .list_flex{
    display:flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    
  }
  .liss_title{
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    color: #333333;
    }
    .liss_time{
      margin-top: 10px;
      font-size: 14px;
      font-weight: normal;
      line-height: 14px;
      letter-spacing: 0px;

      font-variation-settings: "opsz" auto;
      color: #666666;
    }
  .cont_flex{
    display:flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
  }
  .el-drawer__body{
    padding: 0 24px !important;
  }
  
.tabStyle {
    width: 60px;
    height: 30px;
    border-radius: 32px;
    opacity: 1;
    /* 自动布局 */
    display: flex;
    flex-direction: row;
  align-items: center;
  justify-content: center;
    gap: 10px;
    margin-right: 8px;
    color: #666666;
}

.tabStyleActive {
  width: 60px;
  height: 30px;
  border-radius: 32px;
  opacity: 1;
  /* 自动布局 */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(53, 96, 246, 0.1);
  margin-right: 8px;
  color: #1664FF;
}
.el-date-editor {
  width: 256px !important;
}
.contentdiv{
  background: #F5F8FA;
  padding: 20px;
  display: flex;
  align-items: center;
}
.active{
  border: 1px solid #1664FF;
}
:deep(.el-table--default .cell){
  padding: 0 !important;
}
:deep(.el-table td.el-table__cell,.el-table th.el-table__cell.is-leaf){
    border-bottom: 0 !important;
}
.eaclass{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  opacity: 1;
  background: rgba(53, 96, 246, 0.1);
  box-sizing: border-box;
  border: 1px solid rgba(53, 96, 246, 0.2);
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0px;
  font-variation-settings: "opsz" auto;
  color: #3560F6;
  margin-right: 10px;
}
</style>